<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>提货签收</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .checkArea{
            padding: 0.3rem 0;
            border-bottom: 1px solid #e3e3e3;
            height: 0.6rem;
        }
        .widthDraw-area {
            color: #666;
            font-size: 0.28rem;
            padding: 0.3rem 0;
            width: 90%;
            height: auto;
            margin: auto;
        }
        .area-top {
            position: relative;
            width: 100%;
        }
        .area-top span, .area-bottom span {
            line-height: 0.8rem;
            float: left;
        }

        .area-bottom {
            position: relative;
            width: 100%;
        }
        .checkbox-area {
            margin-right: 0.4rem;
            float: right;
            width: 0.2rem;
            height: 0.2rem;
            position: relative;
            margin-top: 0.3rem;
        }
        #checkboxInputOne, #checkboxInputTwo {
            display: none;
        }

        .checkbox-area label {
            display: block;
            width: 100%;
            height: 100%;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            z-index: 1;
            background: snow;
            border: 1px solid #F23A38;
        }

        .checkbox-area input[type=checkbox]:checked + label {
            background: #F23A38;
        }
        /*以下为上传图片*/
        .upload-font{
            padding-top: 0.2rem;
            line-height:1rem;
            width: 100%;
            height: 1rem;
            margin: auto;
        }
        .font-title{font-size: 0.28rem;color: #666;
            display: inline-block;float: left; margin-left: 5%;}
        .addIcon{
            outline: none;
            font-size: 0.5rem;
            background-color: transparent;
            position: absolute;
            color: #F23A38;
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            left: 3rem;
            top: 0.25rem;
        }
        /*上传图片*/
        #upBox{
            box-sizing: border-box;
            text-align: center;
            width: 100%;
            border: 1px solid transparent;
            margin: auto;
            position: relative;
        }
        #inputBox{
            margin-top: 0.2rem;
            width: 0.5rem;
            height: 0.5rem;
            border: 1px solid transparent;
            color: #F23A38;
            position: relative;
            text-align: center;
            line-height: 0.5rem;
            overflow: hidden;
            font-size: 0.45rem;
            float: left;
            margin-left: 1rem;
        }
        #inputBox input{
            width: 0.6rem;
            height: 0.6rem;
            opacity: 0;
            position: absolute;
            top: 0;
            left: -14%;

        }
        #imgBox{
            margin-top: 1rem;
            text-align: left;
        }
        #btn{
            font-size: 0.25rem;
            outline: none;
            width: 2.5rem;
            height: 0.7rem;
            background: #F23A38;
            border: none;
            color: white;
            margin: 1rem 0;
            border-radius: 0.2rem;

        }
        .imgContainer{
            display: inline-block;
            width: 2rem;
            height: 2rem;
            margin-left: 5%;
            border: 1px solid #e3e3e3;
            position: relative;
            box-sizing: border-box;
        }
        .imgContainer img{
            width: 100%;
            height: 100%;
        }
        .imgContainer p{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.4rem;
            background: black;
            text-align: center;
            line-height: 0.45rem;
            color: white;
            font-size: 0.25rem;
            display: none;
        }
        .imgContainer:hover p{
            display: block;
        }
        /*异常原因*/
        .reason-area{
            padding-bottom: 0.1rem;
            border-bottom: 1px solid #e3e3e3;
            height: 0.6rem;
            color: #666;
            width: 90%;
            font-size: 0.28rem;
            margin: auto;
        }
        .reason-area input{
            width: 100%;
            height: 100%;
            outline: none;
        }
        .reason-area input::-webkit-input-placeholder{
            font-size: 0.28rem;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>提货签收</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="widthDraw-area">
        <div class="checkArea area-top">
            <span>正常提货签收</span>
            <section>
                <div class="checkbox-area">
                    <input type="checkbox" value="1" id="checkboxInputOne" name="checkBoxJudge" checked/>
                    <label for="checkboxInputOne"></label>
                </div>
            </section>
        </div>
        <div class="checkArea area-bottom">
            <span>异常提货签收</span>
            <section>
                <div class="checkbox-area">
                    <input type="checkbox" value="2" id="checkboxInputTwo" name="checkBoxJudge"/>
                    <label for="checkboxInputTwo"></label>
                </div>
            </section>
        </div>
    </div>
    <!--以下为异常签收原因-->
    <div class="reason-area">
        <input placeholder="请填写异常签收原因">
    </div>
    <div class="upload-font">
        <span class="font-title">上传1-5张照片</span>
        <div id="upBox">
            <div id="inputBox">
                <input type="file" id="file" multiple accept="image/png,image/jpg">+
            </div>
            <div id="imgBox"></div>
            <button id="btn">提交</button>
        </div>
    </div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/check/jquery-1.7.2.min.js"></script>
<script>
    $(document).ready(function () {//单选
        $("input[name='checkBoxJudge']:checkbox").click(function(){
            if($(this).is(':checked')){
                if($(this).attr('id') === 'checkboxInputOne'){
                    $('#checkboxInputTwo').attr('checked',false);
                    $('#checkboxInputOne').attr('checked',true);
                }else{
                    $('#checkboxInputTwo').attr('checked',true);
                    $('#checkboxInputOne').attr('checked',false);
                }
            }else{
                $('#checkboxInputTwo').attr('checked',false);
                $('#checkboxInputOne').attr('checked',false);
            }
        });
    });

</script>
<script>
    imgUpload({
        inputId:'file',
        imgBox:'imgBox',
        buttonId:'btn',
        upUrl:'',
        data:'file1'
    });
    var imgSrc = [];
    var imgFile = [];
    var imgName = [];
    function imgUpload(obj) {
        var oInput = '#' + obj.inputId;
        var imgBox = '#' + obj.imgBox;
        var btn = '#' + obj.buttonId;
        $(oInput).on("change", function() {
            var fileImg = $(oInput)[0];
            var fileList = fileImg.files;
            for(var i = 0; i < fileList.length; i++) {
                var imgSrcI = getObjectURL(fileList[i]);
                imgName.push(fileList[i].name);
                imgSrc.push(imgSrcI);
                imgFile.push(fileList[i]);
            }
            addNewContent(imgBox);
        })
        $(btn).on('click', function() {
            var data = new Object;
            data[obj.data] = imgFile;
            submitPicture(obj.upUrl, data);
        })
    }
    function addNewContent(obj) {
        $(imgBox).html("");
        for(var a = 0; a < imgSrc.length; a++) {
            var oldBox = $(obj).html();
            $(obj).html(oldBox + '<div class="imgContainer">' +
                '<img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + '>' +
                '<p onclick="removeImg(this,' + a + ')" ' +
                'class="imgDelete">删除</p></div>');
        }
    }
    function removeImg(obj, index) {
        imgSrc.splice(index, 1);
        imgFile.splice(index, 1);
        imgName.splice(index, 1);
        var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
        addNewContent(boxId);
    }
    function submitPicture(url,data) {
        console.log(data);
        if(url&&data){
            $.ajax({
                type: "post",
                url: url,
                async: true,
                data: data,
                traditional: true,
                success: function(dat) {
                    //console.log(dat);
                }
            });
        }
    }
    //图片预览路径
    function getObjectURL(file) {
        var url = null;
        if(window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if(window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>
</body>
</html>